<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html charset="utf-8">
<head>
    <title>图书管理系统</title>
</head>

<link rel="stylesheet" type="text/css" href="css/index.css">
<body>
<h1>欢迎来到图书管理系统</h1>
<%@ include file="sidebar.jsp"%>


<!-- 轮播图1 -->
<div class="slideshow-container">
    <div class="mySlides fade">
        <img src="img/1.jpg" style="width: 1280px">
        <div class="slideshow-caption">Caption One</div>
    </div>
    <div class="mySlides fade">
        <img src="img/2.jpg" style="width: 1280px">
        <div class="slideshow-caption">Caption Two</div>
    </div>
    <div class="mySlides fade">
        <img src="img/3.jpg" style="width: 1280px">
        <div class="slideshow-caption">Caption Three</div>
    </div>
</div>

<div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
</div>
<script>
    var slideIndex = 0;
    showSlides(); // Automatically start the slideshow

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
            slideIndex = 1;
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 5000); // Change image every 5 seconds
    }



</script>
</body>
</html>